<!-- 这边写底部二级页面的内容 -->
 <!-- 模型管理页面 -->
<template>
        <div class="search">
            <el-row >
                <el-col :span="4">
                    <el-form-item label="模型名称">
                        <el-input v-model="nameInput" placeholder ="请输入">
                            <template #append>
                                <el-button>
                                    <el-icon><Search /></el-icon>
                                </el-button>    
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="模型版本">
                        <el-input v-model="versionInput" placeholder ="请输入">
                            <template #append>
                                <el-button>
                                    <el-icon><Search /></el-icon>
                                </el-button>    
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="模型类型">
                        <el-select v-model="typeValue"placeholder="请选择" clearable>
                            <el-option  v-for="item in type":key="item.value":label="item.label":value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row >
                <el-col :span="4">
                    <el-form-item label="创建日期">
                        <el-date-picker
                        type="date"
                        v-model="time"
                        value-format="YYYY-MM-DD" 
                        placeholder="请选择采集日期"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="模型状态">
                        <el-select v-model="conditionValue"placeholder="请选择" clearable>
                            <el-option  v-for="item in condition":key="item.value":label="item.label":value="item.value"/>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>  
        <div class="buttom">
            <!-- 若为空 -->
            <!-- <div class="empty">
                <img src="//g.alicdn.com/aie/portal/1.4.3/console-main/images/75e75323fab8eb06aa38.svg" >   
                <span>暂无数据</span>
            </div> -->
            <el-table :data="tableData" stripe  style="width: 90%" >
                <el-table-column prop="name" label="模型名称"/>
                <el-table-column prop="version" label="模型版本" />
                <el-table-column prop="type" label="模型类型" />
                <el-table-column prop="createTime" label="创建日期" />
                <el-table-column prop="labelCount" label="标签数量" />
                <el-table-column prop="condition" label="模型状态" />
                <el-table-column label="操作">
                    <template v-slot="scope">
                        <span class="operate" @click="goCheck(scope.row)">详情</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    
</template>

<script lang="ts" setup>

import { ref } from 'vue';
    const time = ref('');
    const typeValue = ref('');
    const conditionValue = ref('');
    const nameInput = ref('')
    const versionInput = ref('')
    const tableData =[
        {
            name: "建筑物变化检测",
            version: "1.0.0",
            type: "多分类变化检测",
            createTime: "2022-08-02",
            labelCount: "5",
            condition: "已部署",
        },
        {
            name: "地物分类",
            version: "1.0.0",
            type: "地物分类",
            createTime: "2022-08-01",
            labelCount: "12",
            condition: "已部署",
        },
        {
            name: "建筑物提取",
            version: "1.0.0",
            type: "地物识别",
            createTime: "2022-08-03",
            labelCount: "1",
            condition: "待部署",
        }
    ]
    const type= [
        {
          value: "0",
          label: "目标检测",
        },
        {
          value: "1",
          label: "地物识别",
        },
        {
          value: "2",
          label: "通用变化检测",
        },
        {
          value: "3",
          label: "实例分割",
        },
        {
          value: "4",
          label: "地物分类",
        },
        {
          value: "5",
          label: "多分类变化检测",
        },
      ]
    const condition = [
        {
            value: "0",
            label: "已部署",
        },
        {
            value: "1",
            label: "待部署",
        }
    ]
    function goCheck(row){
        //展示留空
    }
</script>

<style lang="scss" scoped>
.search{
    margin: 40px;
}
.el-col{
    margin-left: 10px;
}
.buttom{
    display: flex;
    justify-content: center;
}
.el-table {
    color: rgb(196,199,202);
    --el-table-border-color: transparent;   
    --el-table-header-bg-color:  rgb(35,37,41);
}

// striped先开启斑马纹属性，这里是修改斑马纹颜色 
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
	background: rgb(35,37,41);
}
// 非斑马纹颜色 
::v-deep .el-table tr {
	background: rgb(23,24,25);
}
// 输入框
::v-deep .el-input__wrapper{
    background-color: rgb(12,14,18);
    box-shadow:   0 0 0 1px  rgb(47,50,56);
}
//搜索按钮
::v-deep .el-input-group__append{
    background-color: rgb(12,14,18 );
    box-shadow:   0 0 0 1px  rgb(47,50,56);
}
//选择框
::v-deep .el-select__wrapper{
    background-color: rgb(12,14,18);
    box-shadow:   0 0 0 1px  rgb(47,50,56);
}
//悬停
.el-table {
    --el-table-row-hover-bg-color: rgba(47,50,56);
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
    --el-table-row-hover-bg-color: rgba(47,50,56);
}
.operate {
  /* 查看和详情的文字颜色 */
  color: #babbba;
  /* 鼠标移过来变成一只手 */
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #4584ff; // 鼠标移过去悬停时的颜色
  }
}


</style>